Nocode-UI

🚧 This package is still under development check for update on Toddle discord

How to use it ?

To be able to use this package you need to import the Style component on every page where you are going to use the Nocode-UI components.

Components

Alert

nui-alert

by Aburio

An alert is use to get user attention

Demo

The title is styled using nui-alert-title

The description is styled using nui-alert-content

With or without Icon

You can use the nui-alert as you want

You can also use it just as a container

Attributes

Name	Description	Expected values
variant	Specify the style of the alert	default success destructive

Events

No events

Slots

Name	Description	Recommended content
Icon	Slot to add an icon	<i> <svg> nui-bootstrap-icon
Default	Slot for title and content	nui-alert-title nui-alert-content text

Subcomponents

No subcomponents

Badge

nui-badge

by Mark Green,Aburio

A badge to highlight a text or icon

Demo

Icon + Text inside span

text only

fix width badge !

default variant

secondary variant

outline variant

success variant

destructive variant

Attributes

Name	Description	Expected values
variant	Specify the style of the alert	default success destructive secondary outline
width	Control width of the badge	px rem % auto 0

Events

No events

Slots

Name	Description	Recommended content
Default	Slot for title and content	text nui-bootstrap-icon

Subcomponents

No subcomponents

Button

nui-button

by Aburio

A button to allow user interactions

Demo

Attributes

Name	Description	Expected values
variant	Specify the style of the button	default secondary outline success destructive ghost link
size	Specify the size of the button	default sm lg square-icon circle-icon

Events

Name	Description
onClick	Get notify when the user click on the button

Slots

Name	Description	Recommended content
Default	Slot for call to action text	text nui-bootstrap-icon <svg> <i>

Subcomponents

No subcomponents

Label

nui-label

by Aburio

A label for form elements

Demo

Input label

Attributes

Name	Description	Expected values
for	Specify the id of form-related element	String

Events

No events

Slots

Name	Description	Recommended content
Default	Slot for content	text nui-bootstrap-icon

Subcomponents

No subcomponents

Input

nui-input

by Aburio

A input field for forms

Demo

Input label

Attributes

Name	Description	Expected values
autocomplete	Specify if the field can be autocompleted by the browser of the user	hidden text search url tel email password
disabled	Specify if the input field is disabled or not	true false
id	Specify the id of the element	String
placeholder	Specify the field placeholder	String
required	Specify if the filed is required to submit form	true false
value	Specify the initial value of the input	String
type	Specify the type of input	true false

Events

No events

Slots

No slots

Subcomponents

No subcomponents

Style

nui-style

by Aburio

The CSS mandatory to manage styles

Demo

Attributes

Name	Description	Expected values
bootstrap-icon	Specify if you want to import the Bootstrap Icon Font. Default is false	true false

Events

No events

Slots

No slots

Subcomponents

No subcomponents

Table

nui-table

by Aburio

A responsive table

Demo

Default variant

A table caption can be added
Date	Username	Comment
02/08/2024	Aburio	Love this team forever !
01/08/2024	KB9	The stadium is beautiful, the fans are incredible, and the team is promising!
01/08/2024	JM-Aulas	...
Avr. 2.33 / 3

Rounded variant

Date	Username	Comment
02/08/2024	Aburio	Love this team forever !
01/08/2024	KB9	The stadium is beautiful, the fans are incredible, and the team is promising!
01/08/2024	JM-Aulas	...
Avr. 2.33 / 3

Attributes

Name	Description	Expected values
variant	Specify the style of the table	default rounded

Events

No events

Slots

Name	Description	Recommended content
Default	Slot for table header and/or body and/or footer	nui-table-header nui-table-body nui-table-footer

Subcomponents

Name	Description	Recommended content
nui-table-header	Compotent with a default slot to insert a table row	nui-table-table-row
nui-table-body	Compotent with a default slot to insert a table row	nui-table-row
nui-table-footer	Compotent with a default slot to insert a table row	nui-table-row
nui-table-row	Component with a default slot to insert table heads and cells	nui-table-head nui-table-cell
nui-table-head	Component with a default slot to insert your table column titles	text nui-bootstrap-icon
nui-table-cell	Component with a default slot to insert your table column contents	text nui-bootstrap-icon nui-badge

Subcomponents attributes

Component	Attribute	Description	Expected values
nui-table-head, nui-table-cell	colspan	Merge cell in column direction	Number (2, 3, 4...)
nui-table-head, nui-table-cell	display	Control display of the cell	hidden sm:table-cell md:table-cell lg:table-cell xl:table-cell 2xl:table-cell
nui-table-head, nui-table-cell	rowspan	Merge cell in row direction	Number (2, 3, 4...)
nui-table-head, nui-table-cell	text-align	Control text alignement	left sm:left md:left md:left lg:left xl:left 2xl:left center sm:center md:center lg:center xl:center 2xl:center right sm:right md:right lg:right xl:right 2xl:right
nui-table-head, nui-table-cell	white-space	Control text wrapping	nowrap
nui-table-head	width	Control column width	px rem % auto 0

Subcomponents events

Component	Name	Description
nui-table-row, nui-table-head, nui-table-cell	onClick	Get notify when the user click on the cell